<template>
  <div class="video">
    <div class="video-box">
      <div
        v-for="item in videoList"
        :key="item.id"
        class="video-box-item"
        @click.native="getSrcToVideo(item.prod)"
      >
        <video-item :videoItem="item"></video-item>
      </div>
    </div>
    <div v-if="videoSrc">
      <video-player ref="videoDom"></video-player>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import axios from "@/http";
import { TVideo } from "@/type/video";
import VideoItem from "./videoItem.vue";
import VideoPlayer from "./videoPlayer.vue";
const videoList = ref<TVideo[]>([]);
const videoDom = ref<any>(null);
const videoSrc = ref<string>("");
onMounted(() => {
  getVideoList();
});
const getVideoList = () => {
  axios.get("/prod/search").then((res) => {
    videoList.value = [...res.data.data, ...res.data.data];
  });
};
const getSrcToVideo = (src: string) => {
  videoSrc.value = src;
  nextTick(() => {
    videoDom.value && (videoDom.value.playerOptions.sources[0].src = src);
  });
};
</script>

<style lang="scss" scoped>
.video {
  &-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &-item {
      width: 48%;
      margin: 3px;
    }
  }
}
</style>
